<template>
  <div class="navbar">
    <div class="head">
      <ul class="nav nav-pills">
        <li class="logo"></li>
        <li role="presentation" :class="path == '/index' ? 'active' : ''">
          <a href="#/index">首页</a>
        </li>
        <li role="presentation">
          <a
            :class="path == '/agents' ? 'active' : ''"
            @click="$router.push('/agents')"
            >房产经纪</a
          >
        </li>
        <li role="presentation">
          <a
            :class="path == '/category' ? 'active' : ''"
            @click="$router.push('/category')"
            >地产分类</a
          >
        </li>
        <li role="presentation">
          <a
            :class="path == '/property' ? 'active' : ''"
            @click="$router.push('/property')"
            >房产列表</a
          >
        </li>
        <li role="presentation">
          <a
            :class="path == '/page' ? 'active' : ''"
            @click="$router.push('/page')"
            >关于我们</a
          >
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      path: "",
    };
  },
  watch: {
    $route: {
      handler: function (val) {
        console.log("$route", val);
        this.path = val.path;
      },
      // 深度观察监听
      deep: true,
    },
  },
  // methods:{
  //   getClass(path){
  //     if(path==this.path){
  //       console.log(44,path);
  //       return 'active'
  //     }
  //     return ''
  //   }
  // }
};
</script>

<style lang="less" scoped >
.head {
  width: 100%;
  height: 60px;
  background: #fff;
  position: fixed;
  z-index: 999;
  margin-bottom: 60px;
  top: 0;
  li {
    margin-top: 10px;
  }
}
.logo {
  width: 100px;
  height: 40px;
  background-color: #337ab7;
  background-image: url("../assets/log.png");
  background-size: 100% 100%;
  margin-left: 300px;
  margin-right: 100px;
  border-radius: 5px;
}
li {
  margin-top: 10px;
}
.navbar {
  margin-bottom: 20px;
}

/deep/ .nav > li {
  .active {
    color: #fff;
    background-color: #337ab7;
  }

  a:hover {
    .active {
      background-color: #337ab7 !important;
    }
  }
}


</style>